import React, { Component } from 'react';
import {
    Form, Badge, Button, Table, Popover, Tabs, Checkbox
} from 'antd';
import LetterElment from "../../../components/LetterElment";

import '../Task.less';

const { TabPane } = Tabs;
const CheckboxGroup = Checkbox.Group;


const options = [
    { label: <LetterElment name="a" />, value: 'Apple' },
    { label: <LetterElment name="b" />, value: 'Pear' },
    { label: <LetterElment name="c" />, value: 'Orange' },
    { label: <LetterElment name="d" />, value: 'xiu' },
];
const columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    width: 80,
    fixed: 'left',
}, {
    title: '10',
    dataIndex: 'age',
    key: '1',
    render: () => {
        const content = (
            <Tabs className="popover-paibang" defaultActiveKey="1">
                <TabPane tab="排班" key="1">
                    <CheckboxGroup options={options} defaultValue={['Pear']} />
                </TabPane>
                <TabPane tab="周期排班" key="2">Content of Tab Pane 2</TabPane>
            </Tabs>
        );
        return (
            <Popover content={content} trigger="click">
                <div className="paneltablecolor-list">
                    <LetterElment name="a" type="tag" />
                    <LetterElment name="b" type="tag" />
                    <LetterElment name="c" type="tag" />
                    <LetterElment name="d" type="tag" />
                    <LetterElment name="xiu" type="tag" />
                </div>
            </Popover>);
    }
}, {
    title: '11',
    dataIndex: 'age',
    key: '2',
    render: () => {
        const content = (
            <Tabs defaultActiveKey="1">
                <TabPane tab="排班" key="1">Content of Tab Pane 1</TabPane>
                <TabPane tab="周期排班" key="2">Content of Tab Pane 2</TabPane>
            </Tabs>
        );
        return (<Popover content={content} trigger="click">
            <div className="paneltablecolor-list">
                <span className="color-orange">A</span>
                <span className="color-green">B</span>
                <span className="color-cyan">C</span>
            </div>
        </Popover>);
    }
}, {
    title: '12',
    dataIndex: 'age',
    key: '3',
    render: () => {
        return (<div className="paneltablecolor-list">
            <span className="color-blue">休</span>
        </div>);
    }
}, {
    title: '13',
    dataIndex: 'age',
    key: '4',
    render: () => {
        return (
            <div className="paneltablecolor-list">
                <span className="color-orange">A</span>
                <span className="color-green">B</span>
                <span className="color-cyan">C</span>
            </div>);
    }
}, {
    title: '14',
    dataIndex: 'age',
    key: '5',
    render: () => {
        return (<div className="paneltablecolor-list">
            <span className="color-orange">A</span>
            <span className="color-green">B</span>
            <span className="color-cyan">C</span>
        </div>);
    }
}];

const dataSource = [{
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号'
}, {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号'
}];

@Form.create()
export default class TaskDetailBasicInfomation extends Component {
    state = {
        pagenav: {
            current: 1,
            pageSize: 10,
            showQuickJumper: true,
            showSizeChanger: true,
            showTotal: total => `总共 ${total} 条`,
            onShowSizeChange: (current, pageSize) => {
                const pagenav = Object.assign({}, this.state.pagenav);
                pagenav.current = current;
                pagenav.pageSize = pageSize;
                this.setState({ pagenav });
                setTimeout(() => {
                    this.bbdExampersonPage();
                });
            },
            onChange: (page, pageSize) => {
                const pagenav = Object.assign({}, this.state.pagenav);
                pagenav.current = page;
                pagenav.pageSize = pageSize;
                this.setState({ pagenav });
                setTimeout(() => {
                    this.bbdExampersonPage();
                });
            },
            total: 0,
        }
    }
    componentDidMount() {
        /* const { dispatch } = this.props;
        dispatch({
          type: 'profile/fetchBasic',
        }); */
    }



    getListData = (value) => {
        let listData;
        switch (value.date()) {
            case 8:
                listData = [
                    { type: 'warning', content: 'This is warning event.' },
                    { type: 'success', content: 'This is usual event.' },
                ]; break;
            case 10:
                listData = [
                    { type: 'warning', content: 'This is warning event.' },
                    { type: 'success', content: 'This is usual event.' },
                    { type: 'error', content: 'This is error event.' },
                ]; break;
            case 15:
                listData = [
                    { type: 'warning', content: 'This is warning event' },
                    { type: 'success', content: 'This is very long usual event。。....' },
                    { type: 'error', content: 'This is error event 1.' },
                    { type: 'error', content: 'This is error event 2.' },
                    { type: 'error', content: 'This is error event 3.' },
                    { type: 'error', content: 'This is error event 4.' },
                ]; break;
            default:
        }
        return listData || [];
    }

    getMonthData = (value) => {
        if (value.month() === 8) {
            return 1394;
        }
    }

    monthCellRender = (value) => {
        const num = this.getMonthData(value);
        return num ? (
            <div className="notes-month">
                <section>{num}</section>
                <span>Backlog number</span>
            </div>
        ) : null;
    }

    dateCellRender = (value) => {
        const listData = this.getListData(value);
        return (
            <ul className="events">
                {
                    listData.map(item => (
                        <li key={item.content}>
                            <Badge status={item.type} text={item.content} />
                        </li>
                    ))
                }
            </ul>
        );
    }


    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                this.props.dispatch({
                    type: 'form/submitRegularForm',
                    payload: values,
                });
            }
        });
    };
    /* 列表模式 */
    renderListPanel = () => {
        return (<div className="tabPanel">
            <Table size="middle" pagination={this.state.pagenav} bordered dataSource={dataSource} columns={columns} scroll={{ x: 2300 }} />
        </div>);
    }

    render() {


        return (
            <div className="TaskDetail TaskDetailPersonnelPlacement">
                <div className="taskdetail-title">
                    调班-代班-班次分配
                </div>
                <div className="info">
                    <div className="list">
                        <span className="label">班次：</span>
                        <LetterElment name="a" />
                        <LetterElment name="b" />
                        <LetterElment name="c" />
                        <LetterElment name="d" />
                        <LetterElment name="xiu" />
                    </div>
                </div>

                <div className="form">
                    <div className="TaskDetailShiftDistribution-title">待调班列表：</div>
                    {this.renderListPanel()}
                    <div className="TaskDetailShiftDistribution-title">增援人员列表：</div>
                    <Table size="middle" pagination={this.state.pagenav} bordered dataSource={dataSource} columns={columns} scroll={{ x: 2300 }} />
                    <div style={{textAlign:'center'}} className="btn-box">
                        <Button>取消</Button>
                        <Button type="primary">保存调班</Button>
                    </div>
                </div>
            </div>
        );
    }
}

